<template>
    <div class="body">
        <div class="left-bar"></div>
        <div class="right-bar">
            <div class="title">
                <h1>{{ $store.getters.getSiteTitle }}</h1>
                <p style="font-size: 16px;margin-top: -12px;">
                    Jianjing Platform Center, Wishing you good health
                </p>
            </div>
            <div class="border-bg">
                <div id="in-border">
                    <h2>登录界面</h2>
                    <p style="font-size: 16px;margin-top: -16px;">Login screen</p>
                    <template>
                        <el-radio  v-model="select" label="1">身份证号</el-radio>
                        <el-radio v-model="select" label="2">手机号</el-radio>
                    </template>
                    <input type="text" v-model="info">
                    <p>密码：<input type="password" v-model="pwd"></p>
                    <p>姓名：<input type="text" v-model="name"></p>
                    <p style="margin-left: 100px">验证码：<input type="text" v-model="code">
                        <img class="changeCodeImg" :src="codeUrl" alt="" @click="changeCode">
                    </p>
                </div>
                
                <br>
                <el-button @click="doLogin">登录</el-button>
                <el-button @click="doReg">注册</el-button>
                <br>
                <div id="fp">
                    <router-link to="/forgetPwd">忘记密码</router-link>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {setToken} from '@/utils/authToken.js'
export default {
    name:"loginView",
    data(){
        return{
            info:"",
            name:"",
            pwd:"",
            code:"",
            codeUrl:"http://localhost:9091/api/code/createCode",
            select: '1',
        }
    },
    created(){
        this.changeCode()
    },
    methods:{
        doLogin(){
            if(this.info == "" || this.name == "" || this.pwd == "" || this.code == ""){
                this.$message.error('填写信息不能为空');
            }else{
                this.$axios.get(
                    "/patient/login",
                    {   
                        params:{
                            info:this.info,
                            pwd:this.pwd,
                            name:this.name,
                            sort:this.select,
                            code:this.code  
                        }
                        
                    }
                ).then(res =>{
                    console.log("登录",res) //拿到token
                    if(res != undefined){
                        if(res.code == 1){
                            this.$message({
                                message: '登录成功',
                                type: 'success'
                            });
                            // 需要将获取到的token存在cookies里面
                            setToken(res.data.token)
                            //登陆成功获取头像
                            this.getAdminFace(res.data.patientInfo.patientSex)
                            this.$router.push("/homepage/welcome")
                        }else if(res.code == 0){
                            this.$message.error('身份等填写信息错误');                            
                        }else if(res.code == 2){
                            this.$message.error('验证码错误');
                            this.changeCode()
                        }
                    }
                })
            }
            
        },
        changeCode(){
            this.codeUrl="/userProject/code/createCode?a="+new Date().getTime()
        },
        doReg(){
            this.$router.push("/reg")
        },
        getAdminFace(sex){
            this.$axios.get(
                '/patient/getFace',
                {
                    params:{
                        sex:sex
                    }
                }
            ).then(res =>{
                console.log("获取头像",res)
                localStorage.setItem("patientFace",res.data)
            })
        },
    }
}
</script>
<style scoped>
.body{
    height: 100vh;
    background-image: url("../static/img/loginBg.png");
    background-size: 100% 100%;
}
.border-bg{
    margin: -2.5em auto 2em;
}

.title{
    color:rgb(44, 65, 228);
    padding: 5%;
    font-family: "Lucida Calligraphy", cursive, serif, sans-serif;

}
p{
    font-size: 20px;
}
#in-border{
    padding: 5px;
    text-align: center;
    display: inline-block;
}
#fp{
    margin-top: 5px;
}

.text{
    float: right;
    right: 0px;
    width: 50%;
    height: 100%;
    position: absolute;
    overflow: auto;

}
.left-bar {
    /* margin-top: -25px; */
    height: 100vh;
    float: left;
    width: 50%;
    position: absolute;
    overflow: auto;
}
.right-bar {
    float: right;
    right: 0px;
    width: 50%;
    height: 100vh;
    position: absolute;
    overflow: auto;
}
.changeCodeImg{
    width: 100px;
    height: 30px;
}

</style>